<app-cheat-sheet [cheatSheet]="cheatSheet">
    <p>
        <strong><a href="https://wiki.factorio.com/Inserters#Inserter_Throughput" target="_blank" rel="noopener">Inserter Throughput</a></strong> - Items
        per second (i/s) moved by the inserter between targets (chests, belts, assemblers, trains, etc...)
        <br>
        <strong><a href="https://wiki.factorio.com/Inserter_capacity_bonus_(research)" target="_blank" rel="noopener">Inserter capacity research</a></strong> is used to increase the throughput.
    </p>
    <p>
        The inserter throughput displayed in the tables below can be used to calculate
        the exact number of inserters needed for your task.
        <br>
        <kbd>
            Inserters Required = (Target Item Rate) / (Inserter Throughput)
        </kbd>
    </p>

    <table class="table table-sm table-hover fixed-width">
        <caption class="text-center">
            Inserter Throughput <span class="d-inline-block d-sm-none">(i/s)</span>

            <div class="input-group d-none-print fixed-width">
                <span class="input-group-addon">Inserter Bonus Level</span>
                <select class="form-control" type="number" [(ngModel)]="bonusLevel" (ngModelChange)="updateTable()">
                    <option *ngFor="let level of bonusLevels" [ngValue]="level">{{level}}</option>
                </select>
            </div>
        </caption>
        <thead class="text-center">
            <tr>
                <th></th>
                <th>Stack Size</th>
                <th>
                    <app-factorio-icon [icon]="dataService.getFactorioIcon('Steel_chest')"></app-factorio-icon>
                    <i class="fas fa-long-arrow-alt-right text-muted d-none d-md-inline-block" aria-hidden="true"></i>
                    <i class="fa fa-long-arrow-down text-muted d-inline-block d-md-none" aria-hidden="true"></i>
                    <app-factorio-icon [icon]="dataService.getFactorioIcon('Steel_chest')"></app-factorio-icon>
                </th>
                <th>
                    <app-factorio-icon [icon]="dataService.getFactorioIcon('Steel_chest')"></app-factorio-icon>
                    <i class="fas fa-long-arrow-alt-right text-muted d-none d-md-inline-block" aria-hidden="true"></i>
                    <i class="fa fa-long-arrow-down text-muted d-inline-block d-md-none" aria-hidden="true"></i>
                    <app-factorio-icon [icon]="dataService.getFactorioIcon('Transport_belt')"></app-factorio-icon>
                </th>
                <th>
                    <app-factorio-icon [icon]="dataService.getFactorioIcon('Steel_chest')"></app-factorio-icon>
                    <i class="fas fa-long-arrow-alt-right text-muted d-none d-md-inline-block" aria-hidden="true"></i>
                    <i class="fa fa-long-arrow-down text-muted d-inline-block d-md-none" aria-hidden="true"></i>
                    <app-factorio-icon [icon]="dataService.getFactorioIcon('Fast_transport_belt')"></app-factorio-icon>
                </th>
                <th>
                    <app-factorio-icon [icon]="dataService.getFactorioIcon('Steel_chest')"></app-factorio-icon>
                    <i class="fas fa-long-arrow-alt-right text-muted d-none d-md-inline-block" aria-hidden="true"></i>
                    <i class="fa fa-long-arrow-down text-muted d-inline-block d-md-none" aria-hidden="true"></i>
                    <app-factorio-icon [icon]="dataService.getFactorioIcon('Express_transport_belt')"></app-factorio-icon>
                </th>
            </tr>
        </thead>
        <tbody class="text-center">
            <tr *ngFor="let item of tableData">
                <td>
                    <app-factorio-icon *ngFor="let iconId of item.icons" [icon]="dataService.getFactorioIcon(iconId)"></app-factorio-icon>
                </td>
                <td><strong>{{item.stackSize}}</strong></td>
                <td>{{item.chestToChest | number:'1.2-2'}} <span class="d-none d-sm-inline-block">i/s</span></td>
                <td>{{item.chestToYellowBelt | number:'1.2-2'}} <span class="d-none d-sm-inline-block">i/s</span></td>
                <td>{{item.chestToRedBelt | number:'1.2-2'}} <span class="d-none d-sm-inline-block">i/s</span></td>
                <td>{{item.chestToBlueBelt | number:'1.2-2'}} <span class="d-none d-sm-inline-block">i/s</span></td>
            </tr>
        </tbody>
    </table>

    <br>

    <ul>
        <li>
            Taking items from belts is slightly slower than placing them.
        </li>
        <li>
            It takes 1.625 stack inserters (exclusive swinging time) to fill half a blue belt.
        </li>
        <li>
            As always check the <a href="https://wiki.factorio.com/Inserters#Inserter_Throughput" target="_blank" rel="noopener">Wiki</a> for more in depth information.
        </li>
    </ul>

</app-cheat-sheet>
